<script setup>
import { computed, onMounted, ref } from "vue";
import { useUserStore } from "@/stores/user.js";
import BasicsBar from "../../../components/basicsBar.vue";
import { mentaHeath, physicalHealth, visionHeath } from "../../../api";
import { toNumber } from "lodash-es";
import IncidentDialog from "./components/incidentDialog.vue";
import CrosswiseBar from "../../../components/crosswiseBar.vue";
import VisionHeathDialog from "./components/visionHeathDialog.vue";
import MentaHeathDialog from "./components/mentaHeathDialog.vue";

const color = ["#2D80FF", "#FEDE73", "#B66DEA", "#93CBFF", "#2DFFF8"];
const dataStore = useUserStore();
const props = defineProps(["HealthServices", "GraduationServices"]);
const data1 = ref([
  {
    name: "重庆大学",
    value1: 12017,
    value2: "95.02%",
    value3: "86.32%",
    value4: "0.00%",
  },
  {
    name: "西南大学",
    value1: 16290,
    value2: "93.49%",
    value3: "90.35%",
    value4: "0.00%",
  },
  {
    name: "西南政法大学",
    value1: 6750,
    value2: "95.57%",
    value3: "89.98%",
    value4: "0.00%",
  },
  {
    name: "重庆医科大学",
    value1: 6689,
    value2: "88.45%",
    value3: "82.43%",
    value4: "77.78%",
  },
  {
    name: "重庆师范大学",
    value1: 8391,
    value2: "91.64%",
    value3: "90.49%",
    value4: "0.00%",
  },
  {
    name: "重庆邮电大学",
    value1: 7250,
    value2: "96.51%",
    value3: "90.97%",
    value4: "0.00%",
  },
  {
    name: "重庆交通大学",
    value1: 8058,
    value2: "85.13%",
    value3: "87.54%",
    value4: "0.00%",
  },
  {
    name: "重庆工商大学",
    value1: 8019,
    value2: "96.03%",
    value3: "87.32%",
    value4: "0.00%",
  },
  {
    name: "四川外国语大学",
    value1: 4306,
    value2: "89.57%",
    value3: "84.84%",
    value4: "0.00%",
  },
  {
    name: "四川美术学院",
    value1: 2024,
    value2: "83.44%",
    value3: "85.14%",
    value4: "0.00%",
  },
]);

const data2 = ref([
  {
    name: "重庆大学",
    value1: 12017,
    value2: 10877,
    value3: "90.51%",
    value4: 1140,
    value5: "9.49%",
  },
  {
    name: "西南大学",
    value1: 16290,
    value2: 14936,
    value3: "91.69%",
    value4: 1354,
    value5: "8.31%",
  },
  {
    name: "西南政法大学",
    value1: 6750,
    value2: 6209,
    value3: "91.99%",
    value4: 541,
    value5: "8.01%",
  },
  {
    name: "重庆医科大学",
    value1: 6689,
    value2: 5658,
    value3: "84.59%",
    value4: 1031,
    value5: "15.41%",
  },
  {
    name: "重庆师范大学",
    value1: 8391,
    value2: 7615,
    value3: "90.75%",
    value4: 776,
    value5: "9.25%",
  },
  {
    name: "重庆邮电大学",
    value1: 7250,
    value2: 6713,
    value3: "92.59%",
    value4: 537,
    value5: "7.41%",
  },
  {
    name: "重庆交通大学",
    value1: 8058,
    value2: 7004,
    value3: "86.92%",
    value4: 1054,
    value5: "13.08%",
  },
  {
    name: "重庆工商大学",
    value1: 8019,
    value2: 7105,
    value3: "88.60%",
    value4: 914,
    value5: "11.40%",
  },
  {
    name: "四川外国语大学",
    value1: 4306,
    value2: 3694,
    value3: "85.79%",
    value4: 612,
    value5: "14.21%",
  },
  {
    name: "四川美术学院",
    value1: 2024,
    value2: 1715,
    value3: "84.73%",
    value4: 309,
    value5: "15.27%",
  },
]);

const xData3 = [
  "合计",
  "城镇零就业家庭",
  "城乡低保家庭",
  "脱贫家庭",
  "本人残疾",
];
const series3 = ref([
  {
    name: "",
    type: "bar",
    barWidth: 24,
    data: [2, 1, 1, 1, 1],
  },
]);

const handleGo = (url) => {
  window.open(url, "_blank");
};

const byqxUrl =
  "https://dp.cqbys.com/screen/detail/type/overview/universityid/0";
const ssjyUrl =
  "https://dp.cqbys.com/screen/detail/type/jinfoJz1/universityid/0";
const tsqtjyUrl = "https://dp.cqbys.com/screen/";
const jtfw = "https://jtj.cq.gov.cn/igixmj/xjgk/202410/tGovMsgBox_1015957.html";
const jqfw =
  "https://www.cq.gov.cn/zwgk/zfxxgkml/zdlyxxgk/shgysy/ggwhty/whly/202406/t20240612_13287600.html";
const tsgfw = "https://st.cqedu.cn/";
const zgfw = "https://xnmy.cdstm.cn/vr/66004/";
const gkcx = "https://gkcj.cqksy.cn/";

onMounted(() => {
  if (dataStore.userType == "02") {
    data1.value = [];
    series3.value = [];
    data2.value = [];
  } else {
    getPhysicalHealth();
    getVisionHeath();
    getMentaHeath();
  }
});

const health = ref([]);
async function getPhysicalHealth() {
  const { data } = await physicalHealth({ year: 2024 });
  health.value = data;
}
const healthXData = ["小学", "初中", "高中", "市教委中职", "高等学校"];
const healthSeries = computed(() => [
  {
    type: "bar",
    name: "优秀率",
    data: health.value.map((item) => toNumber(item.A.replace("%", ""))),
  },
  {
    type: "bar",
    name: "优良率",
    data: health.value.map((item) => toNumber(item.E.replace("%", ""))),
  },
  {
    type: "bar",
    name: "良好率",
    data: health.value.map((item) => toNumber(item.B.replace("%", ""))),
  },
  {
    type: "bar",
    name: "及格率",
    data: health.value.map((item) => toNumber(item.C.replace("%", ""))),
  },
  {
    type: "bar",
    name: "不及格率",
    data: health.value.map((item) => toNumber(item.D.replace("%", ""))),
  },
]);
const healthSeries1 = [
  {
    type: "bar",
    name: "优秀率",
    data: [],
  },
  {
    type: "bar",
    name: "优良率",
    data: [],
  },
  {
    type: "bar",
    name: "良好率",
    data: [],
  },
  {
    type: "bar",
    name: "及格率",
    data: [],
  },
  {
    type: "bar",
    name: "不及格率",
    data: [],
  },
];

const vision = ref({});
async function getVisionHeath() {
  const { data } = await visionHeath({ year: 2024 });
  vision.value = data;
  vision.value.visionRate = toNumber(data.visionRate.replace("%", ""));
}

const psychology = ref({});
async function getMentaHeath() {
  const { data } = await mentaHeath({ year: 2024 });
  psychology.value = data;
}

const visible1 = ref(false);
const visible2 = ref(false);
const visible3 = ref(false);
</script>

<template>
  <div class="right" v-show="dataStore.userType === '01'&& dataStore.switchAddress === '市级'">
    <div class="title bg1"></div>
    <div class="box1">
      <div class="box1-t">
        <div class="text-c9-75-14 cursor-pointer" @click="visible1 = true">
          体质健康
        </div>
        <img
          src="../../../assets/images1/arrowDetail.png"
          class="arrowDetail cursor-pointer"
          @click="visible1 = true"
        />
      </div>
      <BasicsBar
        :xData="healthXData"
        :series="dataStore?.userType === '03' ? healthSeries1 : healthSeries"
        :color="color"
        :legend="{ right: 70, top: 2 }"
        :grid="{
          top: 24,
          bottom: 21,
          left: 40,
          right: 10,
        }"
        yUnit="%"
      ></BasicsBar>
    </div>
    <div class="box2">
      <div class="box2-t">
        <div class="text-c9-75-14 cursor-pointer" @click="visible2 = true">
          视力健康
        </div>
        <img
          src="../../../assets/images1/arrowDetail.png"
          class="arrowDetail cursor-pointer"
          @click="visible2 = true"
        />
      </div>
      <div class="box2-t">
        <div class="text-c9-75-14 cursor-pointer">
          儿童青少年哨点监测近视人数
        </div>
        <div>
          <span class="text-gradual-blue-18">{{ vision.vision }}</span>
          <span class="text-opacity-c9-55-12">人</span>
        </div>
      </div>
      <div class="flex-1">
        <CrosswiseBar :value="vision.visionRate" unit="%"></CrosswiseBar>
      </div>
    </div>
    <div class="box3">
      <div class="box3-t">
        <div class="text-c9-75-14 cursor-pointer" @click="visible3 = true">
          心理健康
        </div>
        <img
          src="../../../assets/images1/arrowDetail.png"
          class="arrowDetail cursor-pointer"
          @click="visible3 = true"
        />
      </div>
      <div class="box3-c">
        <div class="box3-c-c">
          <div class="box3-c-c-t">
            <img src="../../../assets/images1/arrowUp.png" class="arrowUp" />
            <div class="text-gradual-blue-18">
              {{ psychology.basePsychology }}
            </div>
            <div class="text-opacity-c9-55-12">人</div>
          </div>
          <div class="box3-c-c-l"></div>
          <div class="text-c9-65-14">心理咨询工作人员</div>
        </div>
        <div class="box3-c-c">
          <div class="box3-c-c-t">
            <img src="../../../assets/images1/arrowUp.png" class="arrowUp" />
            <div class="text-gradual-blue-18">
              {{ psychology.psychologyArea }}
            </div>
            <div class="text-opacity-c9-55-12">平方米</div>
          </div>
          <div class="box3-c-c-l"></div>
          <div class="text-c9-65-14">心理辅导室面积</div>
        </div>
        <div class="box3-c-c">
          <div class="box3-c-c-t">
            <img src="../../../assets/images1/arrowUp.png" class="arrowUp" />
            <div class="text-gradual-blue-18">
              {{ psychology.highPsychology }}
            </div>
            <div class="text-opacity-c9-55-12">人</div>
          </div>
          <div class="box3-c-c-l"></div>
          <div class="text-c9-65-14">高校心理工作人员</div>
        </div>
      </div>
    </div>
    <div class="title bg2"></div>
    <div class="box4">
      <div class="box4-c1">
        <div class="box4-c1-t">
          <div class="text-c9-75-14 cursor-pointer" @click="handleGo(byqxUrl)">
            毕业去向落实
          </div>
          <img
            src="../../../assets/images1/arrowDetail.png"
            class="arrowDetail cursor-pointer"
            @click="handleGo(byqxUrl)"
          />
        </div>
        <div class="box4-c1-c">
          <div class="box4-c1-c-t">
            <div class="w1 text-opacity-c9-55-12">站点学校</div>
            <div class="w1 text-opacity-c9-55-12">毕业生人数</div>
            <div class="w1 text-opacity-c9-55-12">研究生落实率</div>
            <div class="w1 text-opacity-c9-55-12">本科生落实率</div>
            <div class="w1 text-opacity-c9-55-12">专科生落实率</div>
          </div>

          <div class="box4-c1-c-c">
            <vue3-seamless-scroll
              hover-stop="true"
              :list="data1"
              hover="true"
              :step="0.2"
            >
              <div
                v-for="(item, index) in data1"
                :key="index"
                class="box4-c1-c-c-c"
              >
                <div class="w1 text-c9-65-12">{{ item.name }}</div>
                <div class="w1">{{ item.value1 }}</div>
                <div class="w1">{{ item.value2 }}</div>
                <div class="w1">{{ item.value3 }}</div>
                <div class="w1">{{ item.value4 }}</div>
              </div>
            </vue3-seamless-scroll>
          </div>
        </div>
      </div>
      <div class="box4-c2">
        <div class="box4-c2-t">
          <div
            class="text-c9-75-14 cursor-pointer"
            @click="handleGo(tsqtjyUrl)"
          >
            特殊群体就业情况
          </div>
          <img
            src="../../../assets/images1/arrowDetail.png"
            class="arrowDetail cursor-pointer"
            @click="handleGo(tsqtjyUrl)"
          />
        </div>
        <div class="box4-c2-c">
          <BasicsBar
            :xData="xData3"
            :series="series3"
            :color="color"
            :grid="{
              top: 10,
              bottom: 22,
            }"
            yUnit="k"
          ></BasicsBar>
        </div>
      </div>

      <div class="box4-c1">
        <div class="box4-c1-t">
          <div class="text-c9-75-14 cursor-pointer" @click="handleGo(ssjyUrl)">
            实时就业进展
          </div>
          <img
            src="../../../assets/images1/arrowDetail.png"
            class="arrowDetail cursor-pointer"
            @click="handleGo(ssjyUrl)"
          />
        </div>
        <div class="box4-c1-c">
          <div class="box4-c1-c-t">
            <div class="w1 text-opacity-c9-55-12">站点学校</div>
            <div class="w1 text-opacity-c9-55-12">毕业生人数</div>
            <div class="w2 text-opacity-c9-55-12">去向已落实数及百分比</div>
            <div class="w2 text-opacity-c9-55-12">去向未落实数及百分比</div>
          </div>
          <div class="box4-c1-c-c">
            <vue3-seamless-scroll
              hover-stop="true"
              :list="data2"
              hover="true"
              :step="0.25"
            >
              <div
                v-for="(item, index) in data2"
                :key="index"
                class="box4-c1-c-c-c"
              >
                <div class="w1 text-c9-65-12">{{ item.name }}</div>
                <div class="w1">{{ item.value1 }}</div>
                <div class="w2">{{ item.value2 }} / {{ item.value3 }}</div>
                <div class="w2">{{ item.value4 }} / {{ item.value5 }}</div>
              </div>
            </vue3-seamless-scroll>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="title bg3"></div> -->
    <div class="box6">
      <div class="box6-c" @click="handleGo(jtfw)">
        <img src="../../../assets/images1/shfw1.png" class="box6-c-i" />
        <div class="text-c9-65-14">交通服务</div>
      </div>
      <div class="box6-c" @click="handleGo(jqfw)">
        <img src="../../../assets/images1/shfw2.png" class="box6-c-i" />
        <div class="text-c9-65-14">景区服务</div>
      </div>
      <div class="box6-c" @click="handleGo(tsgfw)">
        <img src="../../../assets/images1/shfw3.png" class="box6-c-i" />
        <div class="text-c9-65-14">图书馆服务</div>
      </div>
      <div class="box6-c" @click="handleGo(zgfw)">
        <img src="../../../assets/images1/shfw4.png" class="box6-c-i" />
        <div class="text-c9-65-14">展馆服务</div>
      </div>
      <div class="box6-c" @click="handleGo(gkcx)">
        <img src="../../../assets/images1/shfw5.png" class="box6-c-i" />
        <div class="text-c9-65-14">高考查询</div>
      </div>
      <div class="box6-c !cursor-default">
        <img src="../../../assets/images1/shfw6.png" class="box6-c-i" />
        <div class="text-c9-65-14">更多</div>
      </div>
    </div>

    <IncidentDialog
      :visible="visible1"
      :title="'2024年区县具体的学生健康情况'"
      @close="visible1 = false"
    ></IncidentDialog>

    <VisionHeathDialog
      :visible="visible2"
      :title="'视力健康'"
      @close="visible2 = false"
    ></VisionHeathDialog>

    <MentaHeathDialog
      :visible="visible3"
      :title="'心理健康'"
      @close="visible3 = false"
    ></MentaHeathDialog>
  </div>

  <div class="right" v-show="dataStore.userType === '02'|| dataStore.switchAddress !== '市级'">
    <div class="title bg1"></div>
    <div class="box5">
      <div
        v-for="(group, groupIndex) in [0, 1]"
        :key="'group-' + groupIndex"
        class="box5_item"
      >
        <template
          v-for="(item, itemIndex) in props?.HealthServices"
          :key="itemIndex"
        >
          <template
            v-if="
              (groupIndex === 0 && itemIndex < 2) ||
              (groupIndex === 1 && itemIndex >= 2 && itemIndex < 4) ||
              (groupIndex === 2 && itemIndex >= 4 && itemIndex < 6)
            "
          >
            <div class="box5_item_c">
              <div class="box5_item_c_item">
                <span class="nr1">{{ item?.metricsname }}</span>
              </div>
              <div class="box5_item_c_h"></div>
              <div class="box5_item_c_item">
                <span
                  ><span class="nr">{{ item?.currentvalue }}</span> <span class="dw">{{ item?.unit }}</span></span
                >
                <span class="nr1"
                  ><img src="@/assets/images/mb_.png" alt="" /> 目标:{{
                    item?.targetvalue
                  }}</span
                >
              </div>
            </div>
            <div
              class="box5_item_s"
              v-if="
                itemIndex < props?.HealthServices?.length - 1 &&
                ((groupIndex === 0 && itemIndex < 1) ||
                  (groupIndex === 1 && itemIndex >= 2 && itemIndex < 2) ||
                  (groupIndex === 2 && itemIndex >= 4 && itemIndex < 5))
              "
            ></div>
          </template>
        </template>
      </div>
      <!-- <div class="box5_item">
        <div class="box5_item_c">
          <div class="box5_item_c_item">
            <span class="nr1">心理咨询工作人员</span>
          </div>
          <div class="box5_item_c_h"></div>
          <div class="box5_item_c_item">
            <span><span class="nr">2128</span> <span class="dw">人</span></span>
            <span class="nr1"
              ><img src="@/assets/images/mb_.png" alt="" /> 目标:--</span
            >
          </div>
        </div>
        <div class="box5_item_s"></div>
        <div class="box5_item_c">
          <div class="box5_item_c_item">
            <span class="nr1">心理咨询工作人员</span>
          </div>
          <div class="box5_item_c_h"></div>
          <div class="box5_item_c_item">
            <span><span class="nr">2128</span> <span class="dw">人</span></span>
            <span class="nr1"
              ><img src="@/assets/images/mb_.png" alt="" /> 目标:--</span
            >
          </div>
        </div>
      </div> -->

      <!-- <div class="box5_item">
        <div class="box5_item_c">
          <div class="box5_item_c_item">
            <span class="nr1">心理咨询工作人员</span>
          </div>
          <div class="box5_item_c_h"></div>
          <div class="box5_item_c_item">
            <span><span class="nr">2128</span> <span class="dw">人</span></span>
            <span class="nr1"
              ><img src="@/assets/images/mb_.png" alt="" /> 目标:--</span
            >
          </div>
        </div>
        <div class="box5_item_s"></div>
        <div class="box5_item_c">
          <div class="box5_item_c_item">
            <span class="nr1">心理咨询工作人员</span>
          </div>
          <div class="box5_item_c_h"></div>
          <div class="box5_item_c_item">
            <span><span class="nr">2128</span> <span class="dw">人</span></span>
            <span class="nr1"
              ><img src="@/assets/images/mb_.png" alt="" /> 目标:--</span
            >
          </div>
        </div>
      </div> -->
    </div>
    <div class="title bg2"></div>
    <div class="box5">
       <div
        v-for="(group, groupIndex) in [0, 1]"
        :key="'group-' + groupIndex"
        class="box5_item"
      >
        <template
          v-for="(item, itemIndex) in props?.GraduationServices"
          :key="itemIndex"
        >
          <template
            v-if="
              (groupIndex === 0 && itemIndex < 2) ||
              (groupIndex === 1 && itemIndex >= 2 && itemIndex < 4) ||
              (groupIndex === 2 && itemIndex >= 4 && itemIndex < 6)
            "
          >
            <div class="box5_item_c">
              <div class="box5_item_c_item">
                <span class="nr1">{{ item?.metricsname }}</span>
              </div>
              <div class="box5_item_c_h"></div>
              <div class="box5_item_c_item">
                <span
                  ><span class="nr">{{ item?.currentvalue }}</span> <span class="dw">{{ item?.unit }}</span></span
                >
                <span class="nr1"
                  ><img src="@/assets/images/mb_.png" alt="" /> 目标:{{
                    item?.targetvalue
                  }}</span
                >
              </div>
            </div>
            <div
              class="box5_item_s"
              v-if="
                itemIndex < props?.GraduationServices?.length - 1 &&
                ((groupIndex === 0 && itemIndex < 1) ||
                  (groupIndex === 1 && itemIndex >= 2 && itemIndex < 2) ||
                  (groupIndex === 2 && itemIndex >= 4 && itemIndex < 5))
              "
            ></div>
          </template>
        </template>
      </div>
      <!-- <div class="box5_item">
        <div class="box5_item_c">
          <div class="box5_item_c_item">
            <span class="nr1">高中毕业数量</span>
          </div>
          <div class="box5_item_c_h"></div>
          <div class="box5_item_c_item">
            <span
              ><span class="nr">532128</span> <span class="dw">人</span></span
            >
            <span class="nr1"
              ><img src="@/assets/images/mb_.png" alt="" /> 目标:--</span
            >
          </div>
        </div>
        <div class="box5_item_s"></div>
        <div class="box5_item_c">
          <div class="box5_item_c_item">
            <span class="nr1">高中毕业数量</span>
          </div>
          <div class="box5_item_c_h"></div>
          <div class="box5_item_c_item">
            <span
              ><span class="nr">532128</span> <span class="dw">人</span></span
            >
            <span class="nr1"
              ><img src="@/assets/images/mb_.png" alt="" /> 目标:--</span
            >
          </div>
        </div>
      </div>
      <div class="box5_item">
        <div class="box5_item_c">
          <div class="box5_item_c_item">
            <span class="nr1">高中毕业数量</span>
          </div>
          <div class="box5_item_c_h"></div>
          <div class="box5_item_c_item">
            <span
              ><span class="nr">532128</span> <span class="dw">人</span></span
            >
            <span class="nr1"
              ><img src="@/assets/images/mb_.png" alt="" /> 目标:--</span
            >
          </div>
        </div>
        <div class="box5_item_s"></div>
        <div class="box5_item_c">
          <div class="box5_item_c_item">
            <span class="nr1">高中毕业数量</span>
          </div>
          <div class="box5_item_c_h"></div>
          <div class="box5_item_c_item">
            <span
              ><span class="nr">532128</span> <span class="dw">人</span></span
            >
            <span class="nr1"
              ><img src="@/assets/images/mb_.png" alt="" /> 目标:--</span
            >
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<style lang="less" scoped>
.right {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  .title {
    width: 100%;
    height: 2.75rem;
  }

  .bg1 {
    background: url(../../../assets/images1/item7.png) no-repeat;
    background-size: 100% 100%;
  }

  .bg2 {
    background: url(../../../assets/images1/item8.png) no-repeat;
    background-size: 100% 100%;
  }
  .bg3 {
    background: url(../../../assets/images1/item4.png) no-repeat;
    background-size: 100% 100%;
  }

  .box1 {
    width: 100%;
    height: 7.75rem;
    background: rgba(9, 54, 100, 0.3);
    position: relative;
    .box1-t {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 0.75rem;
      position: absolute;
      z-index: 999;
    }
  }

  .box2 {
    width: 100%;
    height: 5.125rem;
    background: rgba(9, 54, 100, 0.3);
    display: flex;
    flex-direction: column;
    padding: 0 0.75rem;
    .box2-t {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .box3 {
    width: 100%;
    height: 5.125rem;
    background: rgba(9, 54, 100, 0.3);
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.75rem;
    .box3-t {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .box3-c {
      flex: 1;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .box3-c-c {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .box3-c-c-t {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 0.125rem;
        }
        .box3-c-c-l {
          width: 121px;
          border: 1px solid;
          border-image: linear-gradient(
              90deg,
              rgba(201, 233, 248, 0),
              rgba(201, 233, 248, 0.5),
              rgba(201, 233, 248, 0)
            )
            1 1;
        }
      }
    }
  }
  .box4 {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding-top: 0.5rem;
    background: rgba(9, 54, 100, 0.3);
    .box4-c1 {
      width: 100%;
      height: 9rem;
      display: flex;
      flex-direction: column;
      //   gap: 4px;
      .box4-c1-t {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.75rem;
      }
      .box4-c1-c {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4px;
        overflow: hidden;
        .box4-c1-c-t {
          width: 100%;
          display: flex;
          align-items: center;
        }
        .box4-c1-c-c {
          flex: 1;
          width: 100%;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          gap: 0.125rem;
          .box4-c1-c-c-c {
            flex-shrink: 0;
            width: 100%;
            height: 2rem;
            display: flex;
            align-items: center;
            font-weight: bold;
            font-size: 14px;
            color: #ffffff;
            background: rgba(255, 255, 255, 0.05);
            &:nth-child(2n) {
              background: rgba(255, 255, 255, 0.1);
            }
          }
        }
        .w1 {
          width: 20%;
          display: flex;
          justify-content: center;
        }
        .w2 {
          width: 30%;
          display: flex;
          justify-content: center;
        }
      }
    }

    .box4-c2 {
      // flex: 1;
      height: 144px;
      width: 100%;
      display: flex;
      flex-direction: column;
      .box4-c2-t {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.75rem;
      }
      .box4-c2-c {
        flex: 1;
      }
    }
  }
  .box6 {
    width: 100%;
    height: 4.375rem;
    background: rgba(9, 54, 100, 0.3);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 7px 0;
    .box6-c {
      // flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      .box6-c-i {
        width: 2.75rem;
        height: 37px;
      }
    }
  }
  .box5 {
    width: 100%;
    height: 443px;
    margin-top: 8px;
    margin-bottom: 8px;
    border-radius: 0px 0px 0px 0px;
    padding: 0 12px 0 12px;
    // border: 1px red solid;
    // display: flex;
    // flex-wrap: wrap;
    // gap: 8px;
    .box5_item {
      width: 100%;
      height: 80px;
      
      margin-bottom: 8px;
      display: flex;
      .box5_item_c {
        width: 48.5%;
        height: 100%;
        background: rgba(9, 54, 100, 0.3);
        .box5_item_c_h {
          width: 7.4375rem;
          height: 0px;
          border: 1px solid;
          border-image: linear-gradient(
              90deg,
              rgba(201, 233, 248, 0.4),
              rgba(201, 233, 248, 0)
            )
            1 1;
        }
        .box5_item_c_item {
          width: 100%;
          height: 50%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 12px 0 12px;
          img {
            width: 10px;
            height: 10px;
            display: inline-block;
          }
          // border: 1px red solid;
        }
      }
      .box5_item_s {
        height: 80px;
        border: 1px solid;
        border-image: linear-gradient(
            rgba(0, 178, 238, 0),
            rgba(0, 178, 238, 0.5),
            rgba(0, 178, 238, 0)
          )
          1 1;
        margin-left: 8px;
        margin-right: 8px;
      }
    }
  }
}
.dw {
  font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
  font-weight: normal;
  font-size: 10px;
  color: rgba(201, 233, 248, 0.8);
  line-height: 14px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-left: 4px;
}
.nr {
  font-family: Helvetica, Helvetica;
  font-weight: bold;
  font-size: 18px;
  line-height: 18px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  background: linear-gradient(90deg, #ffffff 0%, #92deff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nr1 {
  font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
  font-weight: normal;
  font-size: 14px;
  color: #c9e9f8;
  line-height: 14px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
</style>
